<template>
	<view class="flex flex-col h-screen">
		<uni-nav-bar title="主播等级" fixed color="#000" statusBar backgroundColor="transparent" :border="false"
			left-icon="left" @clickLeft="back"></uni-nav-bar>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="p-30">
					<view class="bg-[length:100%_100%] rounded-lg flex flex-col p-20 mb-30" :style="{backgroundImage:`url(/static/user/lv_bg1.png)`}">
						<view class="flex items-center">
							<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
							<text :class="['text-[#333333]','text-sm font-bold']">LV.</text>
							<text class="text-[30px] font-bold ml-10" :style="{color:'#329EFF'}">{{levelNow.lev}}</text>
						</view>
						<text class="text-[#697379]">当前等级</text>
						<view class="p-10 mt-10 rounded-lg" :style="{backgroundColor:'#EBF7FF'}">
							<view class="text-[#697379]">
								<view class="flex items-center p-10">
									<text class="flex-1">私麦蓝钻设置范围:{{levelNow.minpblue}}~{{levelNow.maxpblue}}</text>
									<text class="flex-1">公麦蓝钻设置范围:{{levelNow.minvoblue}}~{{levelNow.maxvoblue}}</text>
								</view>
								<view class="flex items-center p-10">
									<text class="flex-1">私责红钻设置范围:{{levelNow.minpred}}~{{levelNow.maxpred}}</text>
									<text class="flex-1">公麦红钻设置范围:{{levelNow.minvored}}~{{levelNow.maxvored}}</text>
								</view>
								<view class="flex items-center p-10">
									<text class="flex-1">收益提成比例:{{levelNow.ratio}}%</text>
								</view>
							</view>
						</view>
					</view>
					<view class="bg-[length:100%_100%] rounded-lg flex flex-col p-20 mb-30" :style="{backgroundImage:`url(/static/user/lv_bg2.png)`}">
						<view class="flex items-center">
							<ImageBoxVue src="/static/icons/lv2.png" width="35rpx" height="29rpx"></ImageBoxVue>
							<text :class="['text-[#333333]','text-sm font-bold']">LV.</text>
							<text class="text-[30px] font-bold ml-10" :style="{color:'#D58C2E'}">{{levelNext.lev}}</text>
						</view>
						<text class="text-[#697379]">下一等级</text>
						<view class="p-10 mt-10 rounded-lg" :style="{backgroundColor: '#FFFDF0'}">
							<view class="text-[#697379]">
								<view class="flex items-center p-10">
									<text class="flex-1">私麦蓝钻设置范围:{{levelNext.minpblue}}~{{levelNext.maxpblue}}</text>
									<text class="flex-1">公麦蓝钻设置范围:{{levelNext.minvoblue}}~{{levelNext.maxvoblue}}</text>
								</view>
								<view class="flex items-center p-10">
									<text class="flex-1">私责红钻设置范围:{{levelNext.minpred}}~{{levelNext.maxpred}}</text>
									<text class="flex-1">公麦红钻设置范围:{{levelNext.minvored}}~{{levelNext.maxvored}}</text>
								</view>
								<view class="flex justify-between items-center p-10">
									<text>收益提成比例:{{levelNext.ratio}}%</text>
									<!-- <view class="btn-up text-sm mr-30 text-white rounded-full bg-gradient-to-b from-[#329EFF] to-[#6CBAFF]" @click="handleUpdate">提升下一等级</view> -->
								</view>
							</view>
						</view>
					</view>
					<view class="mb-30">
						<view class="flex items-center mb-20">
							<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
							<text class="font-bold text-lg ml-20">公麦</text>
						</view>
						<view class="box-input flex items-center">
							<view class=" flex-1 flex flex-col justify-center">
								<view class="flex items-center pl-40 pr-40 mb-30">
									<ImageBoxVue src="/static/icons/blue.png" width="40rpx" height="40rpx"></ImageBoxVue>
									<uni-easyinput class="flex-1 ml-20 self-input" type="number" v-model="setUpCost.voiblue" :inputBorder="false" placeholder="请输入" :styles="styles">
										<template #right>
											<view class="pr-20">{{levelNow.minvoblue}}-{{levelNow.maxvoblue}}</view>
										</template>
									</uni-easyinput>
								</view>
								<view class="flex items-center pl-40 pr-40">
									<ImageBoxVue src="/static/icons/red.png" width="40rpx" height="40rpx"></ImageBoxVue>
									<uni-easyinput class="flex-1 ml-20 self-input" type="number" v-model="setUpCost.voired" :inputBorder="false" placeholder="请输入" :styles="styles">
										<template #right>
											<view class="pr-20">{{levelNow.minvored}}-{{levelNow.maxvored}}</view>
										</template>
									</uni-easyinput>
								</view>
							</view>
						</view>
					</view>
					<view class="">
						<view class="flex items-center mb-20">
							<ImageBoxVue src="/static/icons/title.png" width="35rpx" height="29rpx"></ImageBoxVue>
							<text class="font-bold text-lg ml-20">私麦</text>
						</view>
						<view class="box-input flex items-center">
							<view class=" flex-1 flex flex-col justify-center">
								<view class="flex items-center pl-40 pr-40 mb-30">
									<ImageBoxVue src="/static/icons/blue.png" width="40rpx" height="40rpx"></ImageBoxVue>
									<uni-easyinput class="flex-1 ml-20 self-input" type="number" v-model="setUpCost.privoiblue" :inputBorder="false" placeholder="请输入" :styles="styles">
										<template #right>
											<view class="pr-20">{{levelNow.minpblue}}-{{levelNow.maxpblue}}</view>
										</template>
									</uni-easyinput>
								</view>
								<view class="flex items-center pl-40 pr-40">
									<ImageBoxVue src="/static/icons/red.png" width="40rpx" height="40rpx"></ImageBoxVue>
									<uni-easyinput class="flex-1 ml-20 self-input" type="number" v-model="setUpCost.privoired" :inputBorder="false" placeholder="请输入" :styles="styles">
										<template #right>
											<view class="pr-20">{{levelNow.minpred}}-{{levelNow.maxpred}}</view>
										</template>
									</uni-easyinput>
								</view>
							</view>
						</view>
					</view>
					<view class="flex justify-center items-center rounded-full text-white bg-[#329EFF] p-20 mt-40 text-lg" @click="handleSubmit">保存</view>
				</view>
			</scroll-view>
		</view>
		<uni-popup ref="inputDialogRef" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="提升等级" @confirm="dialogInputConfirm">
				<uni-easyinput type="number" v-model="exp" trim="all" placeholder="请输入要提升的经验值" @input="handleInput"></uni-easyinput>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import userApi from '@/apis/apiList/userApi';
	const inputDialogRef = ref(null);
	const level = ref(0);
	const exp = ref('');
	const needExp = ref(0);
	const anchorId = ref('');
	const anchor = ref({});
	const levelNow = ref({});
	const levelNext = ref({});
	const setUpCost = ref({
		id: '',
		voiblue: '', // 公麦蓝钻
		privoiblue: '', // 私麦蓝钻
		voired: '', // 公麦红钻
		privoired: '', // 私麦红钻
	});
	const styles = {
		color: '#666666',
	}
	onLoad((option) => {
		level.value = Number(option.level);
		anchorId.value = option.id;
		setUpCost.value.id = option.id;
		anchor.value = uni.getStorageSync('anchor');
		getLevelList();
		getNextLevelList();
	})
	
	const handleSubmit = () => {
		const opt = Object.assign({}, setUpCost.value, {});
		if (opt.voiblue < levelNow.value.minvoblue || opt.voiblue > levelNow.value.maxvoblue) {
			uni.showToast({
				icon: "none",
				title: '公麦蓝钻必须设置在有效区间内！'
			})
			return;
		}else if (opt.voired < levelNow.value.minvored || opt.voired > levelNow.value.maxvored) {
			uni.showToast({
				icon: "none",
				title: '公麦红钻必须设置在有效区间内！'
			})
			return;
		}else if (opt.privoiblue < levelNow.value.minpblue || opt.privoiblue > levelNow.value.maxpblue) {
			uni.showToast({
				icon: "none",
				title: '私麦蓝钻必须设置在有效区间内！'
			})
			return;
		}else if (opt.privoired < levelNow.value.minpred || opt.privoired > levelNow.value.maxpred) {
			uni.showToast({
				icon: "none",
				title: '私麦红钻必须设置在有效区间内！'
			})
			return;
		}
		userApi.anchorSetupcost(opt).then(res => {
			uni.navigateBack({
				delta: 1
			})
		})
	}
	const handleInput = (val) => {
		if (val > needExp.value) {
			uni.showToast({
				icon: 'none',
				title: `最大可输入${needExp.value}!`
			})
			return
		}
	}
	// 提升等级
	const handleUpdate = () => {
		inputDialogRef.value.open();
	}
	const dialogInputConfirm = () => {
		if (!exp.value) {
			uni.showToast({
				icon: "none",
				title: "请输入要提升的经验值"
			})
			return
		}
		let opt = {
			id: anchorId.value,
			// 'achorlevel.id': levelNext.value.id,
			exp: exp.value
		}
		userApi.anchorLevelUp(opt).then(res => {
			if (res.code == 200) {
				uni.showToast({
					icon: "none",
					title: "升级成功！"
				})
				getLevelList();
				getNextLevelList();
			}else {
				uni.showToast({
					icon: "none",
					title: res.msg
				})
			}
		})
	}
	const getLevelList = () => {
		let opt = {
			lev: level.value
		}
		userApi.anchorQueryLevelinfo(opt).then(res => {
			if (res.code == 200) {
				levelNow.value = res.data;
				needExp.value = parseInt(levelNow.value.upcost - anchor.value.exp)
			}
		})
	}
	const getNextLevelList = () => {
		let opt = {
			lev: level.value + 1
		}
		userApi.anchorQueryLevelinfo(opt).then(res => {
			if (res.code == 200) {
				levelNext.value = res.data;
			}else {
				levelNext.value = {};
			}
		})
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
.btn-up {
	padding: 10rpx 20rpx;
	box-shadow: 0px 4px 4px 0px rgba(130, 202, 255, 0.4);
}
.box-input {
	background: url(/static/user/lev_bg.png) no-repeat;
	background-size: cover;
	width: 690rpx;
	height: 236rpx;
	.self-input {
		background-color: #E7F1F6 !important;
		border-radius: 999px !important;
	}
	:deep(.uni-easyinput__content) {
		background-color: #E7F1F6 !important;
		border-radius: 999px !important;
	}
}
</style>